<template>
  <div class="navMenu">
    <label v-for="(navMenu,index) in navMenus" :key="index">
      <!--只有一级菜单-->
      <el-menu-item v-if="!navMenu.children" :index="navMenu.key" :route="navMenu.key">
        <!--图标-->
        <i :class="navMenu.icon"></i>
        <!--标题-->
        <span slot="title" class="title-width">{{navMenu.title}}</span>
      </el-menu-item>
      <!--有多级菜单-->
      <el-submenu v-if="navMenu.children" :key="navMenu.key" :index="navMenu.key">
        <template slot="title">
          <i :class="navMenu.icon"></i>
          <span class="title-width">{{navMenu.title}}</span>
          <span @click.stop="wwalert(navMenu.key)" class="dian">
            <ul class="content112" v-if="navMenu.key ===key && visible">
              <li class="lis-item" @click.stop="addPoint">添加下级点位分类</li>
              <li class="lis-item" @click.stop="editPoint">修改点位分类</li>
              <li class="lis-item" @click.stop="deletePoint">删除点位分类</li>
            </ul>···
          </span>
        </template>
        <!--递归组件，把遍历的值传回子组件，完成递归调用-->
        <nav-menu :navMenus="navMenu.children"></nav-menu>
      </el-submenu>
    </label>
  </div>
</template>

<script>
export default {
  name: "NavMenu", //使用递归组件必须要有
  props: ["navMenus"], // 传入子组件的数据
  data() {
    return {
      visible: false,
      key: ""
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log("1212");
      console.log(key, keyPath);
    },
    wwalert(key) {
      console.log(key);
      this.key = key;
      this.visible = !this.visible;
    },
    addPoint() {
      this.visible = false;
    },
    editPoint() {
      this.visible = false;
    },
    deletePoint() {
      this.visible = false;
    }
  }
};
</script>

<style lang="less" scoped>
// /deep/.el-menu-item ,.el-submenu{
//   background-color: #040d29;
// }
.title-width {
  width: 180px;
  display: inline-block;
}
.dian {
  position: relative;
  display: inline-block;
  width: 0.75rem;
  font-weight: bold;
  height: 0.25rem;
  text-align: center;
  line-height: 0.18rem;
  left: 22%;
  .content112 {
    position: absolute;
    z-index: 999;
    display: block;
    left: -0.4rem;
    top: 0.3125rem;
    background-color: #ccc;
    .lis-item {
      height: 0.375rem;
      margin: 0.0625rem;
    }
    &::before {
      position: absolute;
      content: " ";
      left: 50%;
      top: -0.15rem;
      width: 0;
      height: 0;
      border-left: 0.075rem solid transparent;
      border-right: 0.075rem solid transparent;
      border-bottom: 0.15rem solid #ccc;
      transform: translateX(-50%);
    }
  }
}
</style>
